<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录界面</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/regist.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="libs/jquery.min.js"></script>
    <link rel="stylesheet" href="libs/bootstrap-5/css/bootstrap.css">
    <script src="libs/bootstrap-5/js/bootstrap.bundle.js"></script>
    <script src="js/justvalidate/just-validate.production.min.js"></script>
    <style>
        #submitBtn{
            width: 100px;
            color: #fff;
        }
        .formTitle{
            margin-bottom: 10px;
        }
        .input{
            width: 290px;
        }
        /*祝酒词*/
        .toast {
            z-index: 99;
        }

        .toast-header {
            height: 35px;
            line-height: 35px;
            background: linear-gradient(90deg, #0367a6 0%, #008997 74%);
            color: #fff;
            font-size: 14px;
        }
        .toast-body{
            font-size: 16px;
            font-weight: 500;
        }
        /* 倒计时功能 */
        .count-down-container {
            overflow: visible;
        }

        .count-down {
            position: absolute;
            left: calc(50% - 130px);
            top: calc(50% - 260px);
            z-index: 999;
        }

        .flex-container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-content: center;
            align-items: center;
            width: inherit;
            height: inherit;
            color: #ffffff;
        }

        .outbox {
            display: flex;
            flex-direction: row;
            flex-wrap: inherit;
            justify-content: center;
            align-content: center;
            align-items: center;
            border: 10px inset rgba(1, 1, 1, 0.2);
            width: 260px;
            height: 260px;
            border-radius: 100%;
            margin-top: 100px;
        }

        .svg {
            position: relative;
            top: -260px;
            width: 260px;
            height: 260px;
        }

        .cls {
            fill: none;
            stroke: #000;
            stroke-linecap: round;
            stroke-miterlimit: 10;
            stroke-width: 10px;
            stroke-dasharray: 800;
            transform: rotate(270deg);
            transform-origin: 50% 50%;

        }

        .run-anim {
            animation-name: dash;
            animation-fill-mode: none;
            animation-iteration-count: 1;
            animation-timing-function: linear;
        }

        @keyframes dash {
            0% {
                stroke: #84ffc7;
                stroke-dashoffset: 800;
            }

            100% {
                stroke: #84ffc7;
                stroke-dashoffset: 0;
            }
        }

        .count-down-text {
            position:absolute;
            top:173px;
            left: 102px;
            font-size:80px;
            font-weight:800;
            color: #84ffc7;
        }
    </style>
</head>
<body>
<div class="regist right-panel-active">
    <div class="containerForm container_regist">
        <form action="login.backstage" class="form" method="post">
            <h2 class="formTitle">
                <span>欢迎登录</span>
                <span>没有账号？
						<a href="login.html">立即注册</a>
					</span>
            </h2>
            <span>
					<label for="login_username">
						<i class="iconfont icon-zhanghao"></i>
					</label>
					<input type="text" placeholder="请输入您的账号" name="username" class="input" id="login_username"/></span>
            <span>
					<label for="login_password">
						<i class="iconfont icon-mima"></i>
					</label>
					<input type="password" placeholder="请输入您的密码" name="pwd" class="input" id="login_password"/>
				</span>
            <button class="btn" id="submitBtn">登录</button>
        </form>
    </div>
    <!-- 弹出框-->
    <div class="position-absolute top-0 mt-5 w-100" style="z-index: 11">
        <div id="liveToast" class="toast mx-auto" data-bs-delay="6000" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">&nbsp登录错误</strong>
                <small>0秒前</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                出错啦!
            </div>
        </div>
    </div>
    <!--倒计时-->
    <div class="count-downdcontainer" style="display: none">
        <div class="count-down">
            <div class="count-down-text">
                <div>5</div>
            </div>
            <div class="flex-container">
                <div class="outbox">
                </div>
                <svg class="svg">
                    <circle id="cls" class="cls run-anim" cx="130" cy="130" r="125"></circle>
                </svg>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    // 实例化validate对象
    const validation2 = new JustValidate('.form', {
        errorFieldCssClass: 'is-invalid',
        errorLabelStyle: {
            fontSize: '14px',
            color: '#dc3545',
            display:"block"
        },
        successFieldCssClass: 'is-valid',
        successLabelStyle: {
            fontSize: '14px',
            color: '#20b418',
            display:"block"
        },
        focusInvalidField: true,
        lockForm: true,
    });
    //为属性添加校验规则
    validation2.addField(
        '#login_username',
        [
            {
                rule: 'required',
                errorMessage: '用户名必须填写！',
            }
        ]
    ).addField(
        '#login_password',
        [
            {
                rule: 'required',
                errorMessage: '密码必须填写！',
            },
            {
                rule: 'minLength',
                value: 6,
                errorMessage: '密码长度不小于6位！',
            },
        ]
    ).onSuccess((ev) => {
        //阻值表单的默认行为
        ev.preventDefault();
        let username = document.querySelector("#login_username").value;
        let password = document.querySelector("#login_password").value;
        let formData = new FormData();
        formData.append("username", username);
        formData.append("pwd",password);
            fetch(`login.backstage?username=${username}&pwd=${password}`, {
                method: "POST",
                body: formData
            }).then(response => response.json()).then(data => {
                console.log(data);
                if (data.flag) {
                    //倒计时跳转
                    $(".count-downdcontainer").css("display","block");
                    $(".count-down-text").css("display","block");
                    $("body").css({"opacity":"0.5"},{"background-color":"#ccc"});
                    $(".regist").css({"opacity":"0.5"},{"background-color":"#ccc"});
                    let circle = document.getElementById('cls');
                    let total = 5;
                    let count = 4;
                    let intervalNumber = setInterval(function (){
                        $(".count-down-text div").text(`${count}`);
                        count--;
                        if(count==0){clearInterval(intervalNumber)}
                    },1000);

                    circle.style.strokeDashoffset = "800";
                    circle.style.animationDuration = total + "s";
                    circle.style.animationPlayState = "running";
                    set(1000 * total);
                    circle.classList.add("run-anim");

                    function set(total) {
                        let interval = setInterval(ret, total);
                        function ret() {
                            circle.classList.remove("run-anim");
                            void circle.offsetWidth;
                            clearInterval(interval);
                            //跳转页面
                            location.href = "backstage_index.html";
                        }
                    }
                } else {
                    //展示错误信息
                    console.log(data.message);
                    var liveToast = document.getElementById('liveToast');
                    var myToast = bootstrap.Toast.getOrCreateInstance(liveToast);
                    myToast.show();
                    //替换内容
                    let toastBody = document.querySelector("#liveToast .toast-body");
                    toastBody.innerHTML = data.message;
                    let count = 0;
                    let startTime = new Date().getTime();
                    let interval = setInterval(() => {
                        if (new Date().getTime() - startTime > 8000) {
                            clearInterval(interval);
                            return;
                        } else {
                            $(".toast-header small").text(`${count}秒前`);
                            count++;
                        }
                    }, 1000);
                }
            })
    })
</script>
</html>